@charset "UTF-8";

@font-face {
  font-family: "iconfont-gb"; /* project id 738716 */
  src: url("../fonts/iconfont-gb.eot");
  src: url("../fonts/iconfont-gb.eot?#iefix") format("embedded-opentype"),
    url("../fonts/iconfont-gb.woff") format("woff"),
    url("../fonts/iconfont-gb.ttf") format("truetype"),
    url("../fonts/iconfont-gb.svg#iconfont-gb") format("svg");
}

.icon-gb-icon_pc:before {
  content: "\e607";
}
.icon-gb-zhuye:before {
  content: "\e60f";
}
.icon-gb-fenlei:before {
  content: "\e601";
}
.icon-gb-gouwuche:before {
  content: "\e70b";
}

body {
  max-width: 750px;
  margin: 0 auto;
  background: #f5f5f5;
}
.gb-header {
  width: 100%;
  overflow: hidden;
  background: #f4f8fa;
  padding: 16px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  & > div {
    float: left;
  }
  .top-icon {
    margin-right: 8px;
    img {
      width: 52.5px;
    }
  }
  .top-search {
    width: 180px;
    margin-right: 10px;
    height: 25px;
    border-radius: 50px;
    border: 1px solid #1c93d0;
    position: relative;
    button {
      width: 40px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: none;
      background: none;
      color: #999;
      font-size: 16px;
      line-height: 25px;
    }
    input {
      width: 100%;
      height: 100%;
      border: none;
      background: none;
      box-sizing: border-box;
      padding: 0 6px 0 20px;
    }
  }
  .top-person {
    .icon {
      font-size: 24px;
      color: #333;
    }
  }
}
.gb-navbreak {
  width: 100%;
  background: #f4f8fa;
  overflow-x: scroll;
  padding-left: 0;
  padding-right: 7px;
  box-sizing: border-box;
  ul {
    overflow: hidden;
    width: 720px;
    li {
      float: left;
      color: #999;
      font-size: 16px;
      margin-left: 12px;
      margin-right: 12px;
      padding: 4px 0 8px 0;
      a {
        color: #999;
      }
      &.active {
        color: #1c93d0;
        border-bottom: 2px solid #1c93d0;
        a {
          color: #1c93d0;
        }
      }
    }
  }
}
.gb-banner {
  width: 100%;
  padding-bottom: 40%;
  position: relative;
  background: #f4f8fa;
  .swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .swiper-slide {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    img {
      width: 100%;
      // border-radius: r(12);
      // overflow: hidden;
      // box-shadow: 0 0 8px rgba(0,0,0,0.1);
    }
    .swiper-slide-active {
      img {
        width: 100%;
      }
    }
  }
}
.gb-labels {
  width: 100%;
  height: 23px;
  background: #fff;
  .labels-main {
    width: 100%;
    height: 100%;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    .label-depart {
      width: 2px;
      height: 60%;
      background: #ddd;
    }
  }
  p {
    font-size: 12px;
    line-height: 23px;
    span {
      color: #e02242;
    }
  }
}
.gb-hotlist {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 9px 6px 9px 6px;
  .list-main {
    text-align: left;
    h4 {
      font-size: 14px;
      color: #fff;
      position: absolute;
      line-height: 18px;
      left: 4px;
      top: 0;
      margin-bottom: 2px;
      background-size: 100%;
    }
    h5 {
      font-size: 12px;
      color: #fff;
      line-height: 14px;
      margin-bottom: 2px;
      opacity: 0.8;
      span {
        font-size: 10px;
        color: #1c93d0;
        margin-top: 3px;
        line-height: 12px;
        margin-bottom: 3px;
        display: inline-block;
      }
    }
    p {
      font-size: 10px;
      display: inline-block;
      border-radius: 100px;
      padding: 3px;
      padding-left: 6px;
      padding-right: 6px;
      background: hsla(0, 0, 100, 0.5);
      span {
        color: #ff6363;
      }
    }
  }
  .lists-left,
  .lists-right {
    width: 50%;
    float: left;
    height: 156px;
  }
  .lists-left {
    position: relative;
    box-sizing: border-box;
    padding-right: r(3);
    h4 {
      padding: 5px 10px 5px 6px;
      background: url("../img/img-mall/bg-a001.png") top right no-repeat;
    }
    .lists-left-box {
      border-radius: 6px;
      height: 100%;
      overflow: hidden;
      width: 100%;
      background: -webkit-linear-gradient(
        left,
        #85b4e9,
        #7dc4e8
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(
        right,
        #85b4e9,
        #7dc4e8
      ); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(
        right,
        #85b4e9,
        #7dc4e8
      ); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #85b4e9, #7dc4e8); /* 标准的语法 */
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    }
    img {
      width: 86px;
      float: left;
    }
    .list-main {
      width: 90px;
      float: left;
      margin-left: 3px;
    }
  }
  .lists-right-p1,
  .lists-right-p2 {
    width: 100%;
    float: left;
    height: 50%;
    position: relative;
    box-sizing: border-box;
    img {
      width: 50px;
      margin-top: 12px;
    }
    .lists-right-box {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      position: relative;
    }
    .list-main {
      width: 90px;
      margin-left: 19px;
    }
    h4 {
      line-height: 15px;
      padding: 2px 12px 2px 6px;
    }
  }
  .lists-right-p1 {
    padding-left: 2px;
    padding-bottom: 2px;
    .lists-right-box {
      background: -webkit-linear-gradient(
        left,
        #efc690,
        #f8e07e
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(
        right,
        #efc690,
        #f8e07e
      ); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(
        right,
        #efc690,
        #f8e07e
      ); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #efc690, #f8e07e); /* 标准的语法 */
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
    }
    h4 {
      background: url("../img/img-mall/bg-a003.png") top right no-repeat;
    }
  }
  .lists-right-p2 {
    padding-left: 2px;
    padding-top: 2px;
    .lists-right-box {
      background: #a6c7e4;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    }
    h4 {
      background: url("../img/img-mall/bg-a002.png") top right no-repeat;
    }
  }

  .list-new {
    width: 100%;
    box-sizing: border-box;
    height: 85px;
    float: left;
    margin-top: 9px;
    .list-new-content {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      background: -webkit-linear-gradient(
        left,
        #a461f7,
        #85d6ff
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(
        right,
        #a461f7,
        #85d6ff
      ); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(
        right,
        #a461f7,
        #85d6ff
      ); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #a461f7, #85d6ff); /* 标准的语法 */
      img {
        width: 85px;
      }
      .list-new-main {
        color: #fff;
        h4 {
          font-size: 21px;
          line-height: 21px;
          margin-bottom: 6px;
        }
        p {
          font-size: 12px;
        }
      }
      .list-new-link {
        width: 58px;
        height: 58px;
        border-radius: 100%;
        border: 1px solid #fff;
        text-align: center;
        box-sizing: border-box;
        padding-left: 6px;
        p {
          display: inline-block;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.gb-navlist {
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
  ul {
    display: block;
    width: 100%;
    overflow: hidden;
    padding-top: 6px;
    padding-bottom: 12px;
    li {
      width: 20%;
      float: left;
      text-align: center;
      padding-top: 8px;
      padding-bottom: 8px;
      img {
        width: 40px;
        margin-bottom: 3px;
      }
      p {
        font-size: 12px;
        color: #333;
      }
    }
  }
}
.gb-hotparts {
  width: 100%;
  text-align: left;
  .hot-items {
    width: 100%;
    margin-bottom: 28px;
    .hot-banner {
      width: 100%;
      padding-bottom: 45%;
      position: relative;
      img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .hot-content {
      width: 100%;
      box-sizing: border-box;
      padding-left: 6px;
      padding-right: 6px;
      margin-top: -24px;
      position: relative;
      z-index: 6;
      ul {
        display: block;
        overflow: hidden;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        border-radius: 6px;
        overflow: hidden;
        padding: 6px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
        li {
          width: 50%;
          float: left;
          padding: 3px;
          box-sizing: border-box;
          margin-bottom: 4px;
          .img-box {
            width: 100%;
            padding-bottom: 100%;
            position: relative;
            .img-box-inner {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              img {
                width: 100%;
              }
            }
          }
          .des-box {
            width: 100%;
            height: 42px;
            padding-top: 6px;
            padding-bottom: 6px;
            position: relative;
            h4,
            p {
              font-size: 12px;
              line-height: 14px;
              color: #333;
            }
            h4 {
              margin-bottom: 3px;
              height: 28px;
              color: #39b6ff;
              a {
                color: #333;
              }
            }
            p {
              color: #ff6363;
              width: 100%;
              font-weight: bold;
              display: inline-block;
              span {
                float: left;
              }
              i {
                float: right;
                margin-right: 3px;
                font-size: 18px;
                line-height: 18px;
                margin-top: -4px;
                color: #e1a757;
                text-align: right;
              }
            }
          }
          .des-box-last {
            height: 52px;
            h4 {
              height: 40px;
            }
          }
        }
      }
    }
    .check-more {
      text-align: center;
      width: 100%;
      display: block;
      font-size: 16px;
      color: #666;
      text-decoration: none;
      margin-top: 14px;
      span {
        font-size: 19px;
      }
    }
  }
}
.gb-linkshall {
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
  img {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
  }
}
.gb-copyright {
  text-align: center;
  padding-top: 12px;
  padding-bottom: 10px;
  p {
    font-size: 12px;
    color: #999;
    padding-bottom: 6px;
  }
  img {
    width: 30px;
  }
}
.gb-footer {
  width: 100%;
  background: #fff;
  height: 57px;
  position: fixed;
  z-index: 66;
  bottom: 0;
  left: 0;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
  ul {
    height: 100%;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    text-align: center;
    li {
      font-size: 12px;
      width: 60px;
      color: #333;
      text-align: center;
      a {
        color: #333;
      }
      p {
        font-size: 28px;
        margin-top: -6px;
        margin-bottom: 3px;
        text-align: center;
        color: #999;
        i {
          font-size: 28px;
          line-height: 30px;
        }
        &.link-to-flsc {
          width: 42px;
          height: 42px;
          border-radius: 100%;
          display: inline-block;
          line-height: 42px;
          margin-top: -18px;
          margin-bottom: 6px;
          color: #fff;
          background: -webkit-linear-gradient(
            270deg,
            #ff617f,
            #df4eae
          ); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(
            270deg,
            #ff617f,
            #df4eae
          ); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(
            270deg,
            #ff617f,
            #df4eae
          ); /* Firefox 3.6 - 15 */
          background: linear-gradient(
            270deg,
            #ff617f,
            #df4eae
          ); /* 标准的语法 */
        }
      }
      &.active {
        p {
          i {
            &::before {
              background: -webkit-linear-gradient(
                left bottom,
                #2b69b2,
                #87ceed
              );
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          i.icon-gb-zhuye::before {
            content: "\e603";
          }
          i.icon-gb-fenlei::before {
            content: "\e604";
          }
          i.icon-gb-gouwuche::before {
            content: "\e605";
          }
          i.icon-gb-icon_pc::before {
            content: "\e606";
          }
        }
      }
    }
  }
}

// 分类样式
.gb-sorts {
  width: 100%;
  height: 100%;
  padding-bottom: 57px;
  box-sizing: border-box;
  position: relative;
  .swiper-container {
    height: 100%;
  }
  .nav-list {
    width: 80px;
    border-right: 1px solid #eee;
    background: #fff;
    height: 100%;
    float: left;
    overflow: hidden;
    .swiper-slide {
      height: 60px;
      text-align: center;
    }
    p {
      width: 100%;
      color: #666;
      display: block;
      font-size: 12px;
      line-height: 19px;
      box-sizing: border-box;
      text-align: left;
      padding-left: 6px;
      &.active {
        font-weight: bold;
        color: #1c93d0;
        border-left: 2px solid #1c93d0;
      }
    }
  }
  .nav-main {
    margin-left: 20px;
    background: #fff;
    height: 100%;
    overflow: hidden;
    #swiper-sorts {
      width: 100%;
      box-sizing: border-box;
      padding-left: 6px;
      padding-right: 6px;
    }
    .swiper-slide {
      height: auto;
      padding-bottom: 24px;
      padding-top: 6px;
      &:last-child {
        min-height: 100%;
      }
    }
    .sort-lists {
      width: 100%;
      overflow: hidden;
      text-align: center;
      .sort-lists-banner {
        width: 100%;
        height: 110px;
        background: #faa;
        margin-bottom: 12px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      h3 {
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 14px;
        margin-top: 16px;
        position: relative;
        display: inline-block;
        color: #333;
        &::before,
        &::after {
          width: 12px;
          height: 1px;
          content: "";
          background: #999;
          left: -16px;
          position: absolute;
          top: 13px;
        }
        &::after {
          left: auto;
          right: -16px;
        }
      }
      ul {
        display: block;
        overflow: hidden;
        li {
          width: 33.33%;
          height: 95px;
          box-sizing: border-box;
          padding: 6px;
          float: left;
          text-align: center;
          margin-bottom: 9px;
          .sort-lists-img {
            width: 100%;
            height: 60px;
            background: url(../img/img-mall/loading.gif) center no-repeat;
            img {
              height: 100%;
            }
          }
          p {
            height: 30px;
            line-height: 14px;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 7px;
            color: #666;
          }
        }
      }
    }
  }
}
